{% extends "manager/base.html" %}

{% block content %}
<style>
    /* 添加这些CSS样式 */
    .table-container {
        overflow-x: auto;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .table-fixed-header {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 10;
    }
    
    .table-responsive {
        min-height: .01%;
        overflow-x: auto;
    }
    
    @media screen and (max-width: 767px) {
        .table-responsive {
            width: 100%;
            margin-bottom: 15px;
            overflow-y: hidden;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            border: 1px solid #ddd;
        }
    }
</style>

<div class="container-fluid">
    <h2>{{ table_desc }}</h2>
    <a href="{% url 'add_record' table_name=table_name %}" class="btn btn-success mb-3">增加数据</a>
    
    <div class="table-responsive">
        <table class="table table-striped">
            <thead class="table-fixed-header">
                <tr>
                    {% for column in data_columns %}
                    <th>{{ column }}</th>
                    {% endfor %}
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for row in data %}
                <tr>
                    {% for value in row %}
                    <td>{{ value }}</td>
                    {% endfor %}
                    <td>
                        <a href="{% url 'edit_record' table_name=table_name record_id=row.0 %}" class="btn btn-warning btn-sm">编辑</a>
                        <a href="{% url 'delete_record' table_name=table_name record_id=row.0 %}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">删除</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <a href="{% url 'list_tables' %}" class="btn btn-secondary">返回列表</a>
</div>
{% endblock %}